<!--
	省份综合易损性曲线
	Created by Penglei on 2023/08/10
-->
<template>
	<div id="fragilityChartsRef" ref="fragilityChartsRef" class="echats-box"></div>
</template>

<script setup name="FragilityCurve">
import { getCurrentInstance, defineProps, watch, onMounted } from 'vue';
// 引入echats
import * as echarts from 'echarts';
// 引入接口
import { getFragilityListApi, getFragilityCurveApi } from '@/api/vulnerability'
// 引入公用方法
import { ArrayObjUniq } from '@/utils/ruoyi.js'

// 调用父组件事件
const emit = defineEmits();
// 当前实例
const { proxy } = getCurrentInstance();
// 父组件传参
const props = defineProps({
	province: {
		type: String,
		required: true,
		default: () => ''
	}
});

// 所有省份数据
let arrAllProvince = [
	// '河北省', '北京市', '山西省'
];
// 当前索引
let curIndex = ref(0);
// 切换时间间隔
const interval = 10000;
// 定时器
let timer = null;
// 定时切换
const timedSwitching = () => {
	timer = setInterval(() => {
		// 索引设置
		curIndex.value++;
		if (curIndex.value >= arrAllProvince.length) {
			curIndex.value = 0;
		}
		// 切换省份并获取数据
		toggleProvince();
	}, interval)
}
// 关闭定时器
const colseInterval = () => {
	clearInterval(timer);
	timer = null;
}

// 获取有曲线数据的省份列表
const getList = () => {
	getFragilityListApi().then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			arrAllProvince = [...data];
			// 切换省份并获取数据
			toggleProvince();
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 加载数据
const getData = (province) => {
	getFragilityCurveApi({ province }).then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			// 渲染图表
			renderChart(data);
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 切换省份并获取数据
const toggleProvince = () => {
	// 当前省份切换
	if (arrAllProvince[curIndex.value]) {
		emit('onChangeProvince', arrAllProvince[curIndex.value] || '');
	}
	// 加载数据
	getData(arrAllProvince[curIndex.value]);
}

// 监听省份变化
// watch(() => props.province, (val, old) => {
// 	if (val) {
// 		// 加载数据
// 		getData(val);
// 	}
// }, { deep: true, immediate: true })

// 图表
let myChart = null;
// 渲染图表
const renderChart = (data) => {
	if (!myChart) {
		myChart = echarts.init(proxy.$refs.fragilityChartsRef);
	}
	const {
		// 轻微
		slight,
		// 中等
		medium,
		// 严重
		severity,
		// 倒塌
		collapse
	} = data;
	// 数据处理
	let dataAxis = [0, 0.2, 0.4, 0.6, 0.8, 1];
	let dataSlight = [];
	let dataMedium = [];
	let dataSeverity = [];
	let dataCollapse = [];
	// 轻微
	if (slight && slight.length) {
		// 去重、排序、遍历
		ArrayObjUniq(slight, 'vulnerabilityImValue').sort((a, b) => a.vulnerabilityImValue - b.vulnerabilityImValue)
			.map((item, index) => {
				if (item.vulnerabilityImValue) {
					dataSlight.push([item.vulnerabilityImValue, item.vulnerabilityFimValue || null]);
				}
			})
	}
	// 中等
	if (medium && medium.length) {
		// 去重、排序、遍历
		ArrayObjUniq(medium, 'vulnerabilityImValue').sort((a, b) => a.vulnerabilityImValue - b.vulnerabilityImValue)
			.map((item, index) => {
				if (item.vulnerabilityImValue) {
					dataMedium.push([item.vulnerabilityImValue, item.vulnerabilityFimValue || null]);
				}
			})
	}
	// 严重
	if (severity && severity.length) {
		// 去重、排序、遍历
		ArrayObjUniq(severity, 'vulnerabilityImValue').sort((a, b) => a.vulnerabilityImValue - b.vulnerabilityImValue)
			.map((item, index) => {
				if (item.vulnerabilityImValue) {
					dataSeverity.push([item.vulnerabilityImValue, item.vulnerabilityFimValue || null]);
				}
			})
	}
	// 倒塌
	if (collapse && collapse.length) {
		// 去重、排序、遍历
		ArrayObjUniq(collapse, 'vulnerabilityImValue').sort((a, b) => a.vulnerabilityImValue - b.vulnerabilityImValue)
			.map((item, index) => {
				if (item.vulnerabilityImValue) {
					dataCollapse.push([item.vulnerabilityImValue, item.vulnerabilityFimValue || null]);
				}
			})
	}
	// const dataSlight = [[0, 0], [0.2, 0.95], [0.4, 0.97], [0.6, 0.97], [0.8, 0.99], [1, 1]];
	// const dataMedium = [[0, 0], [0.2, 0.82], [0.4, 0.92], [0.6, 0.94], [0.8, 0.96], [1, 1]];
	// const dataSeverity = [[0, 0], [0.2, 0.2], [0.4, 0.82], [0.6, 0.9], [0.8, 0.96], [1, 1]];
	// const dataCollapse = [[0, 0], [0.2, 0.1], [0.4, 0.4], [0.6, 0.8], [0.8, 0.9], [1, 1]];

	// 配置项
	const option = {
		// 提示
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		// 图例
		legend: {
			right: 10,
			top: 70,
			align: 'left', //朝向
			orient: 'vertical', //垂直
			borderRadius: 0,
			itemWidth: 6,
			itemHeight: 6,
			itemGap: 10,
			textStyle: {
				fontSize: 14,
				color: '#FFFFFF',
			},
		},
		xAxis: {
			type: 'value',
			name: 'PGA/g',
			nameLocation: 'end',
			nameTextStyle: {
				fontSize: 14,
				color: '#FFFFFF',
				align: 'center',
				verticalAlign: 'left',
				padding: [10, 0, 0, 32]
			},
			min: 0,
			max: 1,
			// 线条和刻度
			axisLine: {
				show: true,
				color: '#999999',
				lineStyle: {
					width: 2,
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				margin: 11,
				color: '#FFFFFF',
				// align: 'right',
			},
			splitLine: {
				show: false,
			},
			// data: dataAxis,
		},
		yAxis: {
			type: 'value',
			name: '超越概率',
			nameLocation: 'center',
			nameTextStyle: {
				fontSize: 14,
				color: '#FFFFFF70',
				align: 'center',
				verticalAlign: 'left',
				padding: [-30, 0, 0, 0]
			},
			min: 0,
			max: 1,
			// 线条和刻度
			axisLine: {
				show: false,
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				color: '#999999',
			},
			splitLine: {
				lineStyle: {
					type: 'dashed',
					color: '#475ADB80'
				}
			}
		},
		grid: {
			show: false,
			left: '15%',
			right: '15%',
			top: 30,
			bottom: 30,
		},
		color: ['#FF2525', '#A6D839', '#ED5385', '#46FFFF'],
		series: [
			{
				data: dataSlight,
				name: '轻微',
				type: 'line',
				// 平滑
				smooth: true,
				// 数据点大小
				symbolSize: 0,
			},
			{
				data: dataMedium,
				name: '中等',
				type: 'line',
				// 平滑
				smooth: true,
				// 数据点大小
				symbolSize: 0,
			},
			{
				data: dataSeverity,
				name: '严重',
				type: 'line',
				// 平滑
				smooth: true,
				// 数据点大小
				symbolSize: 0,
			},
			{
				data: dataCollapse,
				name: '倒塌',
				type: 'line',
				// 平滑
				smooth: true,
				// 数据点大小
				symbolSize: 0,
			},
		]
	};
	// 渲染
	option && myChart.setOption(option);
}
// 挂载完成
onMounted(() => {
	// 获取有曲线数据的省份列表
	getList();
	// 定时切换
	timedSwitching();
});
// 卸载后
onUnmounted(() => {
	// 关闭定时器
	colseInterval();
});
</script>

<style lang="scss" scoped>
.echats-box {
	width: 100%;
	height: 230px;
}
</style>